<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <h1 class="view-title">招生系统数据</h1>
    </div>
    <div class="main-container animate__animated animate__lightSpeedInLeft">
      <div class="data-box">
        <el-card>
          <div class="chart-box">
            <div class="chart" id="demo1"></div>
            <div class="chart-description">
              <h1 style="font-size: 25px;font-weight: bold;letter-spacing: 5px">招生简章</h1>
              <p>第一条 为保证学校本科招生工作（以下简称招生工作）顺利进行，切实维护学校和考生的合法权益，
                根据《中华人民共和国教育法》《中华人民共和国高等教育法》等相关法律、教育部有关规定和
                《中南大学章程》，结合学校实际情况，特制定本章程。
              </p>
              <p>第二条 学校名称为中南大学（英文为Central South University，英文缩写为CSU），是教育部
                直属全国重点大学、国家“双一流”建设高校，注册地址为湖南省长沙市岳麓区麓山南路932号，邮编为410083。
                中南大学邓迪国际学院（简称“邓迪国际学院”，下同）是经教育部批准，由中南大学与英国邓迪大学合作共建，
                隶属于我校的非独立法人的中外合作办学机构。</p>
              <p>第三条 学校本科招生类别包括普通类、强基计划、综合评价录取、国家专项计划、高校专项计划、保送生、艺术
                类专业、运动训练专业、内地西藏班、内地新疆班、少数民族预科班、香港中学文凭考试学生、澳门保送生、澳门“
                四校联考”学生、台湾学测生、联合招收华侨港澳台学生、邓迪国际学院等。</p>
              <p>第四条 我校本科生在规定学习年限内达到所在专业毕业要求者，颁发中南大学本科毕业证书；符合学校学位授
                予有关规定者，颁发普通高等教育本科毕业生学士学位证书。</p>
              <p>第五条 学校依据教育部颁布的本年度《教育部关于做好普通高校招生工作的通知》和《普通高等学校招生工作规定》，
                全面贯彻实施高校招生“阳光工程”，本着公平、公正、公开原则，综合衡量考生德智体美劳情况，择优选拔。</p>

            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref
} from 'vue';
import * as echarts from "echarts";
/*------变量定义开始------*/
let demo1Chart
const demo1Option = reactive({
  title: {
    text: '招生数据'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['新校区', '校本部', '南校区', '铁道校区', '湘雅校区']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '新校区',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '铁道校区',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '南校区',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '湘雅校区',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '校本部',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})
/*------变量定义结束------*/

/*------钩子开始------*/
onMounted(() => {
  demo1Chart = echarts.init(document.getElementById("demo1"))
  demo1Chart.setOption(demo1Option)
})
onBeforeUnmount(() => {
  demo1Chart.dispose()
})
/*------钩子结束------*/

/*------函数定义开始------*/
/*------函数定义结束------*/
</script>

<style scoped>
.view-container {
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}

.title-box {
  animation-duration: 0.5s;
}
.view-title {
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.main-container {
  width: 100%;
  height: 150vh;
}
.data-box{
  margin-bottom: 2vh;
}
.chart{
  width: 100%;
  height: 70vh;
}
.chart-description{
  padding: 20px;
  width: 90%;
  height: 40vh;
  margin: 5vh;
}
.chart-description p {
  margin: 20px;
  letter-spacing: 1px;
  line-height: 20px;
}
</style>
